import React from 'react';

const Header: React.FC = () => {
  return (
    <header className="w-full flex items-center justify-between px-6 py-3 bg-white shadow-md">
      {/* Logo Section */}
      <div className="flex items-center space-x-4">
        <a href="/" className="flex items-center space-x-2" aria-label="Go to PDF.ai homepage">
          <svg
            viewBox="0 0 64 36"
            xmlns="http://www.w3.org/2000/svg"
            className="w-8 h-8"
          >
            <path
              fill="black"
              d="M41.3111 0H37.6444C30.3111 0 24.6889 4.15556 21.7556 9.28889C18.8222 3.91111 12.9556 0 5.86667 0H2.2C0.977781 0 0 0.977779 0 2.2V5.86667C0 16.1333 8.31111 24.2 18.3333 24.2H19.8V33C19.8 34.2222 20.7778 35.2 22 35.2C23.2222 35.2 24.2 34.2222 24.2 33V24.2H25.6667C35.6889 24.2 44 16.1333 44 5.86667V2.2C43.5111 0.977779 42.5333 0 41.3111 0ZM19.3111 19.5556H17.8444C10.2667 19.5556 4.15556 13.4444 4.15556 5.86667V4.4H5.62222C13.2 4.4 19.3111 10.5111 19.3111 18.0889V19.5556ZM39.1111 5.86667C39.1111 13.4444 33 19.5556 25.4222 19.5556H23.9556V18.0889C23.9556 10.5111 30.0667 4.4 37.6444 4.4H39.1111V5.86667Z"
            ></path>
          </svg>
          <span className="text-lg font-bold">PDF.ai</span>
        </a>
      </div>

      {/* Navigation Section */}
      <nav className="hidden md:flex items-center space-x-6">
        <a href="/tools/pricing" className="text-sm font-medium text-gray-700 hover:text-black">
          Pricing
        </a>
        <a href="/tools/chrome-extension" className="text-sm font-medium text-gray-700 hover:text-black">
          Chrome Extension
        </a>
        <a href="/tools/use-cases" className="text-sm font-medium text-gray-700 hover:text-black">
          Use Cases
        </a>
        <div className="flex items-center space-x-2">
          <button aria-label="Switch Language" className="flex items-center space-x-1">
            <img
              src="https://hatscripts.github.io/circle-flags/flags/us.svg"
              alt="English"
              className="w-5 h-5"
            />
            <span className="text-sm font-medium">EN</span>
          </button>
        </div>
        <a
          href="/auth/sign-in"
          className="text-sm font-medium text-blue-600 hover:text-blue-800"
        >
          Get Started →
        </a>
      </nav>

      {/* Mobile Menu Button */}
      <button className="md:hidden flex items-center" aria-label="Open menu">
        <svg viewBox="0 0 16 16" className="w-6 h-6">
          <path d="M1 4h14c.55 0 1-.45 1-1s-.45-1-1H1c-.55 0-1 .45-1 1s.45 1 1 1zm14 8H1c-.55 0-1 .45-1 1s.45 0-1H14c.55 0 1-.45 1-1s-.45-1-1-1zM0 7H1c.55 0 1-.45 1-1s-.45-1-1-1H1c.55 0-1.45-1 0-1z"></path>
        </svg>
      </button>
    </header>
  );
};

export default Header;
